<template>
  <div>
      <!-- <div class="citys">当前城市</div> -->
    <van-index-bar :index-list="indexList" highlight-color="red">
      <template v-for="(item,index) in dataList" >
        <van-index-anchor :index="item.index"  :key='index'  style="background:#ccc"/>
         <van-cell
            v-for="(sub,key) in item.data"
            :title="sub.name"
            :key="key"
            @click= changecity(sub)
         />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import { cityListData } from "@/api/api";
import Vue from "vue";
import { IndexBar, IndexAnchor, Cell } from "vant";
import "vant/lib/index.css";
Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Cell);
export default {
  data() {
    return {
      dataList: [],
      indexList: [],
    };
  },
  // 进入的时候去掉底部导航
  created() {
    this.eventBus.$emit("footernav", false);

  },
  // 出来的时候显示底部导航
  beforeDestroy() {},

  //页面销毁之后
  destroyed() {
    this.eventBus.$emit("footernav", true);
  },
  async mounted() {
    var abc =await cityListData();
    console.log("我进入cityvue组建了");
    console.log(abc);
    this.dataList = abc[0];
    this.indexList = abc[1];
  },
  methods: {
    changecity(sub){
      console.log('我进入changecity里了');
      console.log('sub',sub);
      this.$store.commit('add2',sub.name)
      this.$store.commit('cinemaidadd',sub.cityId)

      this.$router.push('/cinema')
    }
  },
};
</script>
<style scoped>
  /* .citys{
    position: fixed;
    top: 0;
    z-index: 9999;
  } */
</style>
